<template>
  <div id="content" >
    <header class="news_header">
      <h2>{{ article.ArticleTitle }}</h2>
      <ul>
        <li>{{ article.CreateUser }} 发布于 {{ article.CreateTime }}</li>
        <li>
          共 <strong>{{ article.ArticleBrowsingNum }}</strong> 人围观
        </li>
        <li>
          <strong>{{ article.ArticleCommentNum }}</strong> 人评论
        </li>
      </ul>
    </header>
    <article
      class="news_content"
      v-hljs v-html="article.ArticleBody"
    >
    </article>
    <div class="reprint">
      转载请说明出处：<a href="" title="周黎个人技术博客" target="_blank">周黎个人技术博客</a> »
      <a href="" title="周黎个人技术博客" target="_blank">欢迎来到周黎个人技术博客</a>
    </div>
    <div class="zambia">
      <a href="javascript:;" name="zambia" rel="" @click="likeArticle()"
        ><span class="glyphicon" :class="likeClass"></span> 赞（{{
          article.ArticleLikeNum
        }}）</a
      >
    </div>
    <div class="tags news_tags">
      标签：
      <span
        data-toggle="tooltip"
        data-placement="bottom"
        :title="'查看关于 ' + lable.LableName + ' 的文章'"
        v-for="(lable, index) in article.LableInfo"
        :key="index"
        ><a :href="'/search?lableId='+lable.LableId+''">{{ lable.LableName }}</a>
      </span>
    </div>
    <nav class="page-nav">
      <span class="page-nav-prev"
        >上一篇<br />
        <a v-if="!article.LastArticle">无</a>
        <a
          v-if="article.LastArticle"
          :href="'/home/article/' + article.LastArticle.ArticleId + '.html'"
          rel="prev"
          >{{ article.LastArticle.ArticleTitle }}</a
        >
      </span>
      <span class="page-nav-next"
        >下一篇<br />
        <a v-if="!article.NextArticle">无</a>
        <a
          v-if="article.NextArticle"
          :href="'/home/article/' + article.NextArticle.ArticleId + '.html'"
          rel="next"
          >{{ article.NextArticle.ArticleTitle }}</a
        >
      </span>
    </nav>
    <!-- <div class="content-block related-content visible-lg visible-md">
      <h2 class="title"><strong>相关推荐</strong></h2>
      <ul>
        <li>
          <a target="_blank" href=""
            ><img src="../assets/images/logo.jpg" alt="" />
            <h3>欢迎来到个人技术博客,在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a target="_blank" href=""
            ><img src="images/img1.jpg" alt="" />
            <h3>欢迎来到个人技术博客,在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a target="_blank" href=""
            ><img src="images/img3.jpg" alt="" />
            <h3>欢迎来到个人技术博客，在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a target="_blank" href=""
            ><img src="images/img2.jpg" alt="" />
            <h3>欢迎来到个人技术博客，在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a target="_blank" href=""
            ><img src="images/img2.jpg" alt="" />
            <h3>欢迎来到个人技术博客,在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a target="_blank" href=""
            ><img src="images/img3.jpg" alt="" />
            <h3>欢迎来到个人技术博客,在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a target="_blank" href=""
            ><img src="images/img1.jpg" alt="" />
            <h3>欢迎来到个人技术博客，在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a target="_blank" href=""
            ><img src="images/logo.jpg" alt="" />
            <h3>欢迎来到个人技术博客，在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
      </ul>
    </div> -->
    <div class="content-block comment">
      <h2 class="title"><strong>评论</strong></h2>
      <div class="comment-content">
        <!--PC和WAP自适应版-->
        <div id="SOHUCS" :sid="article.ArticleId"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
import { initChangyanComment } from '../assets/js/changyanload.js'
export default {
  name: 'articledetails',
  data () {
    return {
      article: {
        LastArticle: {},
        NextArticle: {}
      },
      isLike: false
    }
  },
  created () {
    this.getArticleDetails()
  },
  mounted () {
    initChangyanComment()
  },
  computed: {
    likeClass () {
      return this.isLike ? 'glyphicon-heart' : 'glyphicon-heart-empty'
    }
  },
  methods: {
    getArticleDetails () {
      let loadingInstance = Loading.service({
        fullscreen: true,
        text: '加载中'
      })
      this.$axios({
        url: config.blogService.blogHostUrl + 'api/blog/article/details',
        method: 'get',
        params: { articleId: this.$route.params.articleid }
      }).then(res => {
        console.log(res)
        this.$nextTick(() => {
          // 以服务的方式调用的 Loading 需要异步关闭
          loadingInstance.close()
        })
        if (res.data.RetCode === 200) {
          this.article = res.data.Data
          document.title = this.article.ArticleTitle
        }
      }).catch(err => {
        console.log(err)
      })
    },
    likeArticle () {
      let postData = this.$qs.stringify({
        isLike: this.isLike,
        articleId: this.article.ArticleId
      })
      this.$axios({
        url: config.blogService.blogHostUrl + 'api/blog/article/like',
        method: 'post',
        data: postData
      }).then(res => {
        if (res.data.RetCode === 200) {
          this.isLike = !this.isLike
          if (this.isLike) { ++this.article.ArticleLikeNum } else { --this.article.ArticleLikeNum }
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style scoped>
</style>
